<template>
    <div>
        <el-card style="margin-left:10%;margin-right:10%" >
            <!--      内容主体区域-->
            <el-form :model="editForm" status-icon ref="editFormRef" label-width="100px">
                <el-form-item prop="userId" label="用户编号">
                    <el-input class="rt-input" v-model="editForm.userId" disabled></el-input>
                </el-form-item>
                <el-form-item prop="userName" :rules="[{ required: true, message: '名称不能为空'}]" label="用户名称">
                    <el-input class="rt-input" v-model="editForm.userName"></el-input>
                </el-form-item>
                <el-form-item prop="userPhone" label="手机号码">
                    <el-input class="rt-input" v-model="editForm.userPhone"></el-input>
                </el-form-item>
                <el-form-item prop="userCard" label="身份证号码">
                    <el-input class="rt-input" v-model="editForm.userCard"></el-input>
                </el-form-item>
                <el-form-item prop="status" label="审核状态">
                    <el-input class="rt-input" v-model="status" disabled></el-input>
                </el-form-item>


            </el-form>
            <!--      底部区域-->
            <div align="center">
              <el-button @click="resetEdit">重置修改</el-button>
              <el-button type="primary" @click="editUser">确定修改</el-button>
            </div>

        </el-card>
    </div>
</template>

<script>
    export default {
        data() {

            return {
                isVisible:true,
                userInfos:'',
                editForm:'',
                status:''
            }
        },
        created() {
            this.getUserList()
        },
        methods: {
            async getUserList() {
                let username;
                if (localStorage.getItem('username') != null)
                    username = localStorage.getItem('username')
                else
                    username = sessionStorage.getItem('username')
                const {data: res} = await this.$http.get('/user/showInfo/' + username)
                if (res.status !== 200) {
                    return this.$message.error(res.msg + '，获取用户信息失败!')
                }
                this.userInfos = res.data
                this.editForm = res.data
                if (this.userInfos.userStatus==='0')
                    this.status = '未审核'
                else if (this.userInfos.userStatus==='1')
                    this.status = '审核通过'
                else if (this.userInfos.userStatus==='2')
                    this.status = '审核不通过'
                console.log(res.data)
            },

            resetEdit() {
                this.getUserList()
            },
            editUser() {


                this.$refs.editFormRef.validate(async valid => {

                    if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.editForm.userPhone))) {
                        return this.$message.error('请输入正确的手机号！')
                    } else if (this.editForm.userName.length < 1) {
                        return this.$message.error('姓名不能为空，请检查!')
                    } else if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.editForm.userCard))) {
                        return this.$message.error('无效的身份证号，请检查!')
                    }


                    // const base64 = reader.readAsDataURL(this.file); //Base6
                    let role = this.editForm.userRole
                    if (role === 'admin')
                        this.editForm.userPerms = 'super'
                    else if (role === 'user')
                        this.editForm.userPerms = 'normal'

                    console.log(this.editForm)
                    const {data: res} = await this.$http.put('/user/update', this.editForm)
                    if (res.status !== 200) {
                        return this.$message.error(res.msg + '，修改失败!')
                    }
                    this.$message.success('修改成功！')
                    this.getUserList()

                })
            }
        }
    }
</script>

<style scoped>

</style>
